/* 规定页面文字统一大小和背景颜色 */

body {
    background: #FFF;
    font-size: 14px;
}


/* 删除a标签，默认下划线和标签里面文字颜色 */

a {
    color: #000;
    text-decoration: none;
}


/* 清除页面默认内外边距和全局样式*/

* {
    margin: 0;
    padding: 0;
    touch-action: pan-y;
}


/* 取消列表样式 */

ul {
    list-style: none;
}


/* 让图片向上居中 */

img {
    text-align: top;
}


/* 给中间内容部分大盒子设置背景色 */

.mui-content {
    background: #FFF;
}


/* 给顶部搜索栏和底部分类设置背景色 */

.footer,
.header {
    background: #006699;
}


/* 给搜索栏的儿子标题设置字体颜色 */

.header .mui-title {
    color: #FFF;
}


/* 给搜索栏的儿子字体图标设置字体颜色 */

.header .mui-icon {
    color: #FFF;
}


/* 给底部分类的字体和字体图标设置字体颜色 */

.footer .mui-tab-item {
    color: #FFF;
}


/* 给底部分类的字体和字体图标设置特殊的字体颜色 */

.footer .mui-tab-item.mui-active {
    color: darkorange;
}


/* 给导航栏连接的大盒子设置外边距产生距离 */

.nav-links {
    padding: 10px;
}


/* 给导航栏连接的大盒子的a标签转为块元素使他可以设置宽度，并且浮动 */

.nav-links a {
    display: block;
    width: 33.333%;
    float: left;
}


/* 大盒子的a标签里面的图片向上居中对齐，设置宽与父盒子一样 */

.nav-links a img {
    width: 100%;
    text-align: top;
}


/* 品牌专区brand大盒子设置外边距 */

.brand {
    padding: 0 10px;
}


/* 给品牌专区brand大盒子的儿子图片设置宽与父盒子一样，向上居中对齐 */

.brand .title {
    width: 100%;
    text-align: top;
}


/* 给品牌专区brand大盒子的儿子ul设置外边距 */

.brand .list {
    padding: 10px 0;
}


/* 给品牌专区brand大盒子的儿子ul的儿子li设置宽，并浮动 */

.brand .list li {
    width: 25%;
    float: left;
}


/* 将品牌专区brand大盒子的儿子ul的儿子li的儿子a标签转换为块级元素 */

.brand .list a {
    display: block;
}


/* 给品牌专区brand大盒子的儿子ul的儿子图片设置宽与父盒子一样大 */

.brand .list img {
    width: 100%;
}


/* 给类名为product的盒子设置外边距 */

.product {
    padding: 0 10px;
}


/* 给类名为product的盒子的儿子图片设置内边距，宽与父盒子一样大 */

.product .title {
    width: 100%;
    margin: 10px 0;
}


/* 给类名为product的盒子的孙子li设置内边距，宽是父盒子的一半，并浮动 */

.product li {
    width: 50%;
    float: left;
    padding: 5px;
}


/* 将类名为product的盒子的孙子li的儿子a标签转为块级元素，设置外边距，盒子阴影，溢出隐藏 */

.product a {
    display: block;
    padding: 0 5px;
    box-shadow: 0 0 5px #ccc;
    overflow: hidden;
}


/* 给a标签的图片设置宽与父盒子一样 */

.product a img {
    width: 100%;
}


/* 将a标签的儿子span */

.product .name {
    line-height: 18px;
    display: block;
    color: #8f8f94;
    text-align: center;
    padding: 6px;
    height: 44px;
    overflow: hidden
}


/* 将a标签的儿子p */

.product p {
    font-size: 12px;
    text-align: center;
}


/* 将a标签的儿子span的第一个儿子 */

.product p span:first-child {
    color: #f30;
    margin-right: 2px;
}


/* 将a标签的儿子span的第二个儿子设置一条下划线 */

.product p span:last-child {
    color: #ccc;
    text-decoration: line-through;
    margin-left: 2px;
}


/* a标签的儿子按钮 */

.product .buy-now {
    background: #006699;
    color: #FFF;
    margin: 0 auto;
    border: none;
    display: block;
    margin-bottom: 10px;
}

.product .mui-btn {
    color: #FFF;
    margin: 0 auto;
    border: none;
    display: block;
    margin-bottom: 10px;
}